<template>
  <div class="flex flex-col justify-center h-[800px] overflow-hidden rounded-xl">
<!--    顶部栏-->
    <div  class="p-2">
      <span v-if="commits" class="text-lg font-bold">Commits Lab</span>
    </div>
    <el-scrollbar>
      <el-timeline class="w-[400px] p-2">
      <el-timeline-item v-for="commit in commits" :key="commit.sha" :timestamp="formatDate(commit.commit.author.date)" placement="top">
        <el-card>
          <h4>{{ commit.commit.message }}</h4>
          <p>{{ commit.commit.author.name }} | {{ formatDate(commit.commit.author.date) }}</p>
        </el-card>
      </el-timeline-item>
      </el-timeline>
    </el-scrollbar>
  </div>
</template>

<script setup lang="ts">
import axios, {request} from 'axios';
import {reactive,ref} from "vue";
const commits = ref([])
function initcommit(){
  axios.get('http://localhost:8080/api/commits', {
    params: {
      owner: 'jjjsama',
      repo: 'animal-management-system',
      token: '090100a901f958e374cb76e614182a31'
    }
  })
      .then(request =>{
      console.log(request.data)
         commits.value = request.data;

        console.log(commits)
      });
}
initcommit()

function padZero(num) {
  return num < 10 ? `0${num}` : num;
}

 function formatDate(dateString) {
  const date = new Date(dateString);
  const year = date.getFullYear();
  const month = padZero(date.getMonth() + 1); // Months are zero indexed
  const day = padZero(date.getDate());
  const hours = padZero(date.getHours());
  const minutes = padZero(date.getMinutes());
  const seconds = padZero(date.getSeconds());
  return `${year}/${month}/${day} ${hours}:${minutes}:${seconds}`;
}
</script>

